# Botón de radio / Radio button

### Código

```
<radio button></radio button>
```





### Tokens

**Color**

| Class                                   | Property         | Color token |
| :-------------------------------------- | :--------------- | :---------- |
| `.bx--label`                            | text color       | `$text-02`  |
| `.bx--radio-button__label`              | text color       | `$text-01`  |
| `.bx--radio-button__appearance`         | border           | `$ui-05`    |
| `.bx--radio-button__appearance`         | background-color | `$ui-01`    |
| `.bx--radio-button__appearance:checked` | border           | `$ui-05`    |
| `.bx--radio-button__appearance::before` | dot              | `$ui-05`    |

Tokens

| Class                                    | Property   | Color token    |
| :--------------------------------------- | :--------- | :------------- |
| `.bx--radio-button__appearance:focus`    | border     | `$focus`       |
| `.bx--label:disabled`                    | text color | `$disabled-02` |
| `.bx--radio-button__label:disabled`      | text color | `$disabled-02` |
| `.bx--radio-button__appearance:disabled` | border     | `$disabled-02` |

**Tipografía**

| Class                      | Type token       |
| :------------------------- | :--------------- |
| `.bx--label`               | `$label-01`      |
| `.bx--radio-button__label` | `$body-short-01` |

**Estructura**

| Class                                  | Property      | Spacing token |
| :------------------------------------- | :------------ | :------------ |
| `.bx--radio-button__appearance`        | height, width | –             |
| `.bx--radio-button__appearance:before` | height, width | –             |
| `.bx--radio-button__label`             | margin-bottom | `$spacing-03` |
| `.bx--radio-button__appearance`        | margin-right  | `$spacing-03` |
| `.bx--radio-button__appearance`        | margin-bottom | `$spacing-03` |